<template>
    <div class="cl-breadcrumb">
        <cl-button
          v-for="(r, i) in routes"
          :key="'Breadcrumb' + i"
          :pattern="isLast(i) ? 'primary' : 'default'"
          @click="r.click">{{ r.label }}<i v-if="isLast(i) && routes.length > 1" class="el-icon-close"></i></cl-button>
    </div>
</template>

<script>
export default {
    name: 'ClBreadcrumb',
    props: {
        routes: Array
    },
    methods: {
        isLast(i) {
            return i === this.routes.length - 1
        }
    }
}
</script>

<style lang="less" scoped>
    .cl-breadcrumb {
        display: flex;
        align-items: center;

        .el-icon-close {
            margin-left: 3px;
        }

        .cl-button {
            margin-left: 0;
        }

        .cl-button+.cl-button {
            margin-left: 15px;
        }
    }
</style>
